import ReactDOM from 'react-dom'
import { useState } from 'react'

const Counter = () => {
  // 一般是使用ts自动推导出的类型，如果感觉类型不准确，可以自己指定类型
  // 指定的格式就是下面的格式
  // const [count, setCount] = useState<number>(0)
  const [count, setCount] = useState(0)
  const onClick = () => {
    // 采用这个方式不能实现连续加
    // setCount(count + 1)
    // setCount( count + 2)
    // 函数式的调用功能方法可以保证每次都能获取最新的状态，然后更新
    setCount(count => count + 1)
    setCount(count => count + 2)
  }
  const [isLoading, setIsLoading] = useState(true)
  const handleLoading = () => {
    setIsLoading(!isLoading)
  }

  const [songs, setSongs] = useState(['痴心绝对', '南山南', '成都'])
  const handleSongs = () => {
    setSongs(['好汉歌', ...songs])
  }
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={onClick}>加1</button>
      <hr />
      <div>{isLoading ? '加载中' : '数据加载完成'}</div>
      <button onClick={handleLoading}>加载数据</button>
      {songs.map((item, index) => (
        <p key={index + '123'}>{item}</p>
      ))}
      <button onClick={handleSongs}>增加歌曲</button>
    </div>
  )
}

ReactDOM.render(<Counter />, document.getElementById('root'))
